<template>
    <div class="app">
        <div class="header">
            <div class="headerbox">
                <div class="avatives">
                    <img src="../assets/images/123.jpg" alt="" v-if="isimg">
                    <img :src="img" alt="" v-else>
                </div>
                <div class="namebox">
                    <div class="names">{{userlist.nickname}}</div>
                    <div class="signature">个性签名：</div>
                    <div class="signature signature1">{{userlist.signature}}</div>
                </div>
            </div>
        </div>
        <div class="boxs">
            <div>
                <div v-for="(item, index) in list" :key="index" class="box">
                    <div style="float: right">
                        <i class="el-icon-delete-solid skyblue" v-if="item.user_id == user_id" style="cursor: pointer" @click="deleteart(item.acticle_id, index)"></i>
                    </div>
                    <div class="avatar">
                        <div class="avatarbox">
                            <img src="../assets/images/123.jpg" alt="" v-if="item.head_img == '123.jpg'">
                            <img :src="item.head_img" alt="" v-else>
                        </div>
                        <div class="name">
                            <div>
                                {{item.nickname}}
                                <el-button icon="el-icon-chat-dot-round" style="margin-left: 10px" circle @click="liuyan(item.user_id)"></el-button>
                            </div>
                            <div class="time">{{item.data_time | time}}</div>
                        </div>
                    </div>
                    <div class="content">
                        {{item.content}}
                        <div style="margin-top: 10px">
                            <img :src="item.picture" alt="" style="width: 200px" v-if="item.picture != ''">
                        </div>
                    </div>
                    <div class="operation">
                        <div style="color: gray;font-size: 13px">
                            浏览{{item.state}}次
                        </div>
                        <div class="zanbox">
                            <div class="zan" @click="zan(item.acticle_id, item.iszan, index, item.state)" style="cursor: pointer">
                                <img src="../assets/images/点赞.png" alt="" v-if="!item.iszan">
                                <img src="../assets/images/点赞1.png" alt="" v-else>
                            </div>
                            <div @click="comment(item.acticle_id, index, item.state)" style="cursor: pointer">
                                <i class="el-icon-s-comment comment"></i>
                            </div>
                        </div>
                    </div>
                    <div class="hr"></div>
                    <div class="zanlistbox" v-if="item.zan.length != 0">
                        <div class="zanlist">
                            <img src="../assets/images/点赞1.png" alt="">
                        </div>
                        <div v-for="(a,b) in item.zan" :key="b" class="zanlistname">
                            <span>{{a.nickname}}</span>
                            <span style="margin-left: 5px">、</span>
                        </div>
                    </div>
                    <div>
                        <el-button type="text" @click="isflag(index)" v-if="item.comment.length != 0"  class="all">展示全部</el-button>
                        <el-button type="text" @click="isflags" v-if="item.comment.length != 0" class="all">收起</el-button>
                    </div>
                    <div v-for="(c, d) in item.comment" :key="d">
                        <div class="commentlist">
                            <div class="commentavatar">
                                <img src="../assets/images/123.jpg" alt="" v-if="c.head_img == '123.jpg'">
                                <img :src="c.head_img" alt="" v-else>
                            </div>
                            <div>
                                <div style="font-size: 13px">{{c.nickname}}: {{c.comments_content}}</div>
                                <div style="display: flex;align-items: center">
                                    <div class="time">{{c.comments_time | time}}</div>
                                    <i class="el-icon-s-comment skyblue" style="cursor: pointer;margin-left: 10px" @click="addreplys(item.acticle_id, c.comments_id, index, item.state, d)"></i>
                                    <i class="el-icon-delete-solid skyblue" v-if="c.comments_user_id == user_id || user_id == item.user_id" @click="delelecomment(c.comments_id, item.acticle_id, index)" style="cursor: pointer;margin-left: 10px"></i>
                                </div>
                            </div>
                        </div>
                        <div v-show="sum == index">
                            <div v-for="(e, f) in c.reply" :key="f" class="reply">
                                <div class="commentlist">
                                    <div class="commentavatar">
                                        <img src="../assets/images/123.jpg" alt="" v-if="e.head_img == '123.jpg'">
                                        <img :src="e.head_img" alt="" v-else>
                                    </div>
                                    <div>
                                        <div style="font-size: 13px">{{e.reply_nickname}}回复{{c.nickname}}：{{e.reply_content}}</div>
                                        <div style="display: flex;align-items: center">
                                            <div class="time">{{e.reply_time | time}}</div>
                                            <i class="el-icon-delete-solid" v-if="e.reply_user_id == user_id || user_id == item.user_id" @click="deletereps(e.reply_id, index, f, d)" style="cursor: pointer;margin-left: 10px"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <textarea rows="2" cols="20" v-model="textarea" placeholder="评论" v-show="commentsum == index"></textarea>
                    <div style="overflow: hidden">
                        <el-button type="primary" class="send" size="mini" @click="comments(item.acticle_id, item.user_id, index)" v-show="commentsum == index">确定</el-button>
                    </div>
                    <div v-show="isreply == index">
                        <textarea rows="2" cols="20" v-model="replytext" placeholder="回复" ></textarea>
                        <div style="overflow: hidden">
                            <el-button type="primary" class="send" size="mini" @click="addreply1(index)">确定</el-button>
                        </div>
                    </div>

                </div>
                <div style="text-align: center;margin-top: 20px;cursor: pointer" @click="more" v-show="ismore">加载更多</div>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        addcomments,
        addreading, addreply,
        addzan,
        deletearticle, deletecomments, deletereply,
        deletezan, getotheractivity, getcomments,
        getreply, getuser,
        getzan,
        liuyanuser
    } from '../api/api'
    export default {
        filters: {
            time(value){
                return value.substring(0, value.length-4)
            }
        },
        name: "other",
        data(){
            return{
                list:[],
                user_id:'',
                n:1,
                textarea:'',
                commentsum:-1, //显示评论框
                comments_id:0,
                isreply:-1,
                replytext:'',
                sum:-1, //显示回复
                ismore:true,
                index:-1,
                isimg:true,
                img:'',
                userlist:[]
            }
        },
        methods:{
            //留言
            liuyan(user_id){
                this.$prompt('留言','提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(({ value }) => {
                    console.log(value)
                    liuyanuser(user_id, value).then(res=>{
                        console.log(res)
                        if(res.status == 0){
                            this.$message({
                                showClose: true,
                                message: '留言成功',
                                type: 'success'
                            });
                        }
                    })
                }).catch(()=>{})
            },

            //增加阅读量
            addreadings(acticle_id, index, state){
                addreading(acticle_id).then(res=>{
                    if(res.status == 0){
                        this.$set(this.list[index], 'state', ++state)
                    }
                })
            },
            //展示全部
            isflag(index){
                this.sum = index
            },
            //收起
            isflags(){
                this.sum = -1
            },
            //删除文章
            deleteart(acticle_id, index){
                this.list.splice(index,1)
                deletearticle(acticle_id).then(res=>{
                    if(res.status == 0){
                        this.$message({
                            showClose: true,
                            message: '删除成功',
                            type: 'success'
                        });
                    }
                })
            },
            //点赞操作
            zan(acticle_id, iszan, index, state){
                if(iszan){
                    //取消点赞
                    deletezan(acticle_id).then(res=>{
                        if(res.status == 0){
                            getzan(acticle_id).then(a=>{
                                if(a.status == 0){
                                    this.$set(this.list[index], 'zan', a.data)
                                    // console.log(this.list[index])
                                }
                            })
                            this.$set(this.list[index], 'iszan', false)
                        }
                    })
                }else {
                    //点赞
                    this.addreadings(acticle_id, index, state)
                    addzan(acticle_id).then(res=>{
                        if(res.status == 0){
                            getzan(acticle_id).then(a=>{
                                if(a.status == 0){
                                    this.$set(this.list[index], 'zan', a.data)
                                }
                            })
                            this.$set(this.list[index], 'iszan', true)
                            this.$message({
                                showClose: true,
                                message: '点赞成功！',
                                type: 'success'
                            });
                        }
                    })
                }
                // this.get(this.n)
            },
            //评论
            comment(acticle_id, index, state){
                this.isreply = -1
                if(this.commentsum == -1){
                    this.addreadings(acticle_id, index, state)
                    this.commentsum = index
                }else {
                    this.commentsum = -1
                }
            },
            comments(acticle_id, user_id, index){
                if(this.textarea != ''){
                    addcomments(acticle_id, user_id, this.textarea).then(res=>{
                        // console.log(res)
                        if(res.status == 0){
                            this.$message({
                                showClose: true,
                                message: '评论成功',
                                type: 'success'
                            });
                            getcomments(acticle_id).then(b=>{
                                if(b.status == 0){
                                    // console.log(b)
                                    this.$set(this.list[index], 'comment', b.data)
                                }
                            })
                            this.textarea = ''
                        }
                    })
                }else {
                    this.$message({
                        showClose: true,
                        message: '请评论！',
                        type: 'info'
                    });
                }
            },
            //删除评论
            delelecomment(comments_id, acticle_id, index){
                deletecomments(comments_id).then(res=>{
                    // console.log(res)
                    if(res.status == 0){
                        getcomments(acticle_id).then(b=>{
                            if(b.status == 0){
                                // console.log(b)
                                this.$set(this.list[index], 'comment', b.data)
                            }
                        })
                        this.$message({
                            showClose: true,
                            message: '删除成功',
                            type: 'success'
                        });
                    }
                })
            },
            //添加回复
            addreplys(acticle_id, comments_id, index, state, d){
                this.index = d
                this.commentsum = -1
                this.comments_id = comments_id
                if(this.isreply == -1){
                    this.addreadings(acticle_id, index, state)
                    this.isreply = index
                }else {
                    this.isreply = -1
                }
            },
            addreply1(index){
                if(this.replytext != ''){
                    addreply(this.comments_id, this.replytext).then(res=>{
                        if(res.status == 0){
                            this.$message({
                                showClose: true,
                                message: '评论成功',
                                type: 'success'
                            });
                            getreply(this.comments_id).then(d=>{
                                // console.log(d)
                                this.$set(this.list[index].comment[this.index],'reply',d.data)
                            })
                            this.sum = -1
                            this.replytext = ''
                        }
                    })
                }else {
                    this.$message({
                        showClose: true,
                        message: '请评论！',
                        type: 'info'
                    });
                }
            },
            //删除回复
            deletereps(reply_id, index, f, d){
                deletereply(reply_id).then(res=>{
                    // console.log(res)
                    if(res.status == 0){
                        this.$message({
                            showClose: true,
                            message: '删除成功',
                            type: 'success'
                        });
                        this.list[index].comment[d].reply.splice(f,1)
                        this.sum = -1
                    }
                })
            },
            //获取全部文章
            get(n){
                //获取全部文章
                getotheractivity(`${JSON.parse(sessionStorage.getItem('userinfo'))[0].user_id}`,`${n}`).then(res=>{
                    // console.log(res)
                    if(res.data.length == 0){
                        // console.log(1)
                        this.ismore = false
                    }
                    if(res.status == 0){
                        var list1 = res.data
                        // console.log(list1)
                        res.data.forEach(value=>{
                            // console.log(value)
                            //添加新的属性，显示点赞的人和是否点赞
                            value.iszan = false
                            value.zan = []
                            //添加评论的属性。显示评论
                            value.comment = []
                            //获取点赞的人
                            getzan(value.acticle_id).then(a=>{
                                // console.log(a)
                                value.zan = a.data
                                for(var i=0;i<a.data.length;i++){
                                    if(a.data[i].user_id == this.user_id){
                                        value.iszan = true
                                    }
                                }
                            })
                            //获取评论人
                            getcomments(value.acticle_id).then(b=>{
                                // console.log(b)
                                if(b.status == 0){
                                    value.comment = b.data
                                }
                                b.data.forEach(c=>{
                                    // console.log(c)
                                    c.reply = []
                                    getreply(c.comments_id).then(d=>{
                                        // console.log(d)
                                        c.reply = d.data.concat()
                                    })
                                })
                            })
                        })
                        // console.log(list1)
                        this.list = this.list.concat(list1)
                    }
                })
            },
            //获取更多
            more(){
                this.n++
                this.get(this.n)
            }
        },
        created() {
            // console.log()
            this.get(this.n)
            getuser().then(res=>{
                // console.log(res)
                if(res.status == 0) {
                    this.user_id = res.data.user_id
                    // console.log(this.user_id)
                }
            })
            this.userlist = JSON.parse(sessionStorage.getItem('userinfo'))[0]
            if(JSON.parse(sessionStorage.getItem('userinfo'))[0].head_img != '123.jpg') {
                this.isimg = false
                this.img = JSON.parse(sessionStorage.getItem('userinfo'))[0].head_img
            }
        }
    }
</script>

<style scoped>
    .app {
        background-color: #e9e9e9;
        height: 100%;
        padding-bottom: 700px;
    }
    .header {
        height: 650px;
        background-image: url("https://i.gtimg.cn/qzone/space_item/orig/3/72019_top.jpg");
        background-repeat: no-repeat;
        background-position: center;
    }
    .headerbox {
        padding-top: 150px;
        display: flex;
        min-width: 1000px;
        max-width: 1000px;
        margin: auto;
    }
    .avatives {
        width: 120px;
        height: 120px;
        background-color: white;
    }
    .avatives>img {
        width: 100%;
        height: 100%;
    }
    .namebox {
        margin-left: 25px;
    }
    .names {
        color: #157c8c;
        font-size: 20px;
    }
    .signature {
        margin-top: 28px;
        font-size: 13px;
    }
    .signature1 {
        margin-left: 28px;
    }
    .boxs {
        min-width: 1000px;
        max-width: 1000px;
        margin: -360px auto 0px;
    }
    .box {
        margin-top: 20px;
        background-color: white;
        border: 1px solid #c7e5eb;
        padding: 10px;
    }
    .avatar {
        display: flex;
        align-items: center;
    }
    .avatarbox {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        overflow: hidden;
        cursor: pointer;
    }
    .avatarbox>img {
        width: 100%;
        height: 100%;
    }
    .name {
        margin-left: 10px;
    }
    .time {
        font-size: 12px;
        color: gray;
    }
    .content {
        margin-top: 10px;
    }
    .operation {
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .zanbox {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .zan {
        width: 24px;
        height: 24px;
        margin-right: 40px;
    }
    .zan>img {
        width: 100%;
        height: 100%;
    }
    /deep/.comment {
        color: #cdcdcd;
        font-size: 24px;
    }
    .hr {
        width: 100%;
        height: 1px;
        background-color: #c7e5eb;
        margin-top: 10px;
    }
    .zanlistbox {
        display: flex;
        color: skyblue;
        font-size: 12px;
        align-items: center;
        margin-top: 10px;
    }
    .zanlist {
        width: 24px;
        height: 24px;
    }
    .zanlist>img {
        width: 100%;
        height: 100%;
    }
    .zanlistname {
        margin-left: 5px;
    }
    .zanlistname:last-child>span:last-child{
        display: none;
    }
    textarea {
        margin-top: 10px;
        width: 100%;
        height: 40px;
        resize: none;
        text-indent: 1em;
        outline: 0;
        border: 1px solid #c7e5eb;
        padding-top: 5px;
        box-sizing: border-box;
    }
    .send {
        margin-top: 5px;
        float: right;
    }
    .commentlist {
        margin-top: 20px;
        display: flex;
        align-items: center;
    }
    .commentavatar {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 10px;
    }
    .commentavatar>img {
        width: 100%;
        height: 100%;
    }
    .reply {
        margin-left: 50px;
    }
    /deep/.skyblue:hover{
        color: skyblue;
    }
    /deep/.all {
        margin-top: 10px;
        color: black;
        font-size: 13px;
        padding: 0;
    }
    /deep/.all:hover{
        color: skyblue;
        border-bottom: 1px solid skyblue;
    }
</style>
